<!-- 关于我们页面 -->
<!-- XXX 考虑单独建立个分包，放在不常用的分包中 -->
<template>
  <div class="container">
    <!-- 导航栏 -->
    <uni-nav-bar
      class="nav-bar"
      fixed="true"
      status-bar="true"
      :border="false"
      left-icon="left"
      @click-left="back"
    />
    <!-- logo -->
    <image
      class="logo"
      src="https://ustatic.hudongmiao.com/joymew-host-contest/common-logo.svg"
    />
    <!-- 标题 -->
    <view class="title">
      嗨喵主持人
    </view>
    <!-- 版本 -->
    <view class="version">
      当前版本{{ version || '1.2.4' }}
    </view>
    <!-- 内容 -->
    <div class="content">
      这里是嗨喵主持人行业联盟，拓展行业人脉、获取最新资讯、各类活动福利...加入嗨喵，有趣有料有惊喜。
    </div>
  </div>
</template>

<script lang="ts" setup>
import { back } from '@/utils/navigate';

/** 版本号 */
const version = computed(() => uni.getAccountInfoSync().miniProgram.version);
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vw;

  display: grid;
  grid-template:
    'nav-bar' auto
    'logo' auto
    'title' auto
    'version' auto
    'content' auto
    / 1fr;
  justify-items: center;

  .nav-bar {
    grid-area: nav-bar;
  }

  .logo {
    grid-area: logo;
    margin-top: 50px;

    width: 100px;
    height: 100px;
  }

  .title {
    grid-area: title;
    margin-top: 20px;

    font-size: 24px;
    font-weight: bold;
  }

  .version {
    grid-area: version;

    font-size: 14px;
    color: #999;
  }

  .content {
    grid-area: content;
    margin-top: 20px;

    padding: 0 20px;

    font-size: 14px;
    text-align: center;
  }
}
</style>
